<template>
  <div class="search">
    <!-- 搜索结果统计 -->
    <div class="search-header">
      <h2>搜索结果: {{ total }} 条</h2>
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="餐厅" name="restaurant" />
        <el-tab-pane label="菜品" name="dish" />
      </el-tabs>
    </div>

    <!-- 餐厅搜索结果 -->
    <div v-if="activeTab === 'restaurant'" class="restaurant-list">
      <el-empty v-if="restaurants.length === 0" description="暂无相关餐厅" />
      <div v-else v-for="item in restaurants" :key="item.id" class="restaurant-item" @click="goToRestaurant(item.id)">
        <el-image :src="item.image" fit="cover" class="restaurant-img" />
        <div class="restaurant-info">
          <h3>{{ item.name }}</h3>
          <p class="desc">{{ item.description }}</p>
          <div class="meta">
            <span>{{ item.businessHours }}</span>
            <span>{{ item.address }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 菜品搜索结果 -->
    <div v-else class="dish-list">
      <el-empty v-if="dishes.length === 0" description="暂无相关菜品" />
      <div v-else v-for="item in dishes" :key="item.id" class="dish-item">
        <el-image :src="item.image" fit="cover" class="dish-img" />
        <div class="dish-info">
          <h3>{{ item.name }}</h3>
          <p class="restaurant">{{ item.restaurantName }}</p>
          <p class="price">¥{{ item.price }}</p>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { searchRestaurants } from '@/api/restaurant'
import { searchDishes } from '@/api/dish'

const route = useRoute()
const router = useRouter()

const activeTab = ref('restaurant')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const restaurants = ref([])
const dishes = ref([])

// 获取搜索结果
const fetchSearchResults = async () => {
  const keyword = route.query.keyword
  if (!keyword) return

  try {
    if (activeTab.value === 'restaurant') {
      const res = await searchRestaurants({
        keyword,
        pageNum: currentPage.value,
        pageSize: pageSize.value
      })
      restaurants.value = res.data.records
      total.value = res.data.total
    } else {
      const res = await searchDishes({
        keyword,
        pageNum: currentPage.value,
        pageSize: pageSize.value
      })
      dishes.value = res.data.records
      total.value = res.data.total
    }
  } catch (error) {
    console.error('搜索失败:', error)
  }
}

// 切换标签
const handleTabChange = () => {
  currentPage.value = 1
  fetchSearchResults()
}

// 改变每页显示数量
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  fetchSearchResults()
}

// 改变页码
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchSearchResults()
}

// 跳转到餐厅详情
const goToRestaurant = (id) => {
  router.push(`/restaurant/${id}`)
}

// 监听路由参数变化
watch(() => route.query.keyword, () => {
  currentPage.value = 1
  fetchSearchResults()
})

onMounted(() => {
  fetchSearchResults()
})
</script>

<style scoped>
.search {
  padding: 20px;
}

.search-header {
  margin-bottom: 20px;

  h2 {
    margin: 0 0 15px;
    font-size: 20px;
  }
}

.restaurant-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.restaurant-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-5px);
  }

  .restaurant-img {
    width: 100%;
    height: 200px;
  }

  .restaurant-info {
    padding: 15px;

    h3 {
      margin: 0 0 10px;
      font-size: 18px;
    }

    .desc {
      color: #666;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .meta {
      display: flex;
      justify-content: space-between;
      color: #999;
      font-size: 14px;
    }
  }
}

.dish-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.dish-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;

  .dish-img {
    width: 100%;
    height: 150px;
  }

  .dish-info {
    padding: 10px;

    h3 {
      margin: 0 0 5px;
      font-size: 16px;
    }

    .restaurant {
      color: #666;
      font-size: 14px;
      margin: 0 0 5px;
    }

    .price {
      color: #f56c6c;
      margin: 0;
      font-weight: bold;
    }
  }
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style> 